import React from "react"
import './style.css'

export default function BasicUse() {
    const username: String = '韦小玉'

    // 实例1
    function timeout(ms: number){
        return new Promise((res,rej)=>{
            setTimeout(res,ms,'done')
        })
    }
    timeout(100).then((value)=>{
        console.log('resolved function',value)
    })

    // 实例2
    let promise = new Promise(function(resolve,reject){
        console.log('Promsie')
        resolve('resolving')
    })
    promise.then(function(res){

        console.log('resolved.',res)
    })
    console.log('Hi!')



    return (
        <>
            <h1>你好，{username}！</h1>
            <div className="out">
                <h3>基础用法</h3>
                <div className="in1">
                    <h3>
                        1.创建promise对象
                    </h3>
                    const promise = new Promise(function(resolve,reject)&#123;
                    <br />
                    // some code
                    <br />
                    // 写代码
                    <br />
                    if(异步操作成功)&#123;
                    <br />
                    resolve(value)
                    <h4>// resolve函数作用是，将Promise对象的状态从pending=&gt;resolved，
                        在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
                    </h4>
                    &#125;else&#123;
                    <br />
                    reject(error)
                    <h4>// reject函数的作用是，将Promise对象的状态从pending=&gt;rejected，
                        在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去
                    </h4>
                    &#125;
                    <br />
                    &#125;)
                </div>
                <div className="in2">
                    <h3>
                        2.回调函数，根据不同状态做不同操作
                    </h3>
                    promise.then(function(value)&#123;
                    <br />
                        // success
                    <br />
                    &#125;,function(error)&#123;
                    <br />
                    // failure
                    <br />
                    &#125;)
                    <br />
                    then方法接受两个回调函数作为参数。
                    <br />
                    第一个回调函数时Promise对象的状态变为resolved时调用；
                    <br />
                    第二个回调函数是Promise对象的状态变为rejected时调用；
                    <br />
                    <strong>第二个函数可选，不一定要提供；两个函数都接受
                        <br />
                        Promise对象传出的值作为参数</strong>
                </div>
                <div className="in3">
                    <h3>实例1</h3>
                    timeout 方法返回一个Promise实例，表示一段时间以后才会发生的结果。
                    过了指定的时间（ms参数）以后，Promsie实例的状态变为resolved，就会触发
                    then方法绑定的回调函数。
                </div>
                <div className="in4">
                    <h3>实例2</h3>
                    首先输出Promise；然后同步任务；最后是then方法指定的回调函数，将在当前脚本所有同步任务
                    执行完才会执行
                </div>
            </div>
        </>
    )
}